<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">    <title>01属性选择器</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        button:nth-of-type(1):active ~ [id="section1"]{/*属性选择器*/
            background: yellow;
        }
        button:nth-of-type(2):active ~ [id*="section1"]{/*整个内容中有包含section1的*/
            background: #ff3366;
        }
        button:nth-of-type(3):active ~ [id^="section"]{/*以section开头的*/
            background: #ffdbaf;
        }
        button:nth-of-type(4):active ~ [id$="\-1"]{/*以-1结尾的*/
            background: #fad9ff;
        }

        a{
            color:#333;
        }

        button:nth-of-type(5):active ~ ul li a[href$=\/]:after,
        button:nth-of-type(5):active ~ ul li a[href$=htm]:after,
        button:nth-of-type(5):active ~ ul li a[href$=html]:after {
            content: "这是网页";
            color: red;
        }
        a[href$=jpg]:after{
            content: "这是jpeg图像";
            color: green;
        }
    </style>
</head>
<body>
<h1>1-1属性选择器</h1>
<h3>点击下面按钮，按下鼠标左键不抬起时请观察选择结果</h3>
    <button>[id=section1]</button>id为section1的元素<br>
    <button>[id*=section1]</button>id整个内容中有包含section1的<br>
    <button>[id^=section]</button>id以section开头的<br>
    <button>[id$=\-1]</button>id以-1结尾的<br>
    <button>a[href$=\/]:after,
        a[href$=htm]:after,
        a[href$=html]:after</button>以/,htm,html结尾的a元素后面分别添加红色文字“这是网页”<br><br>

    <div id="section1">示例文本1 <code>id="section1"</code></div>
    <div id="subsection1-1">示例文本1-1 <code>id="subsection1-1"</code></div>
    <div id="subsection1-2">示例文本1-2 <code>id="subsection1-2"</code></div>
    <div id="section2">示例文本2 <code>id="section2"</code></div>
    <div id="subsection2-1">示例文本2-1 <code>id="subsection2-1"</code></div>
    <div id="subsection2-2">示例文本2-2 <code>id="subsection2-2"</code></div>
    <br>
    <ul>
        <li><a href="http://e-art.taobao.com">新e风艺术工作室</a><code>href="http://e-art.taobao.com"</code></li>
        <li><a href="http://unKnown/">HTML5+CSS3权威指南</a><code>href="http://unKnown/"</code></li>
        <li><a href="http://unKnown/CSS3.htm">CSS3的新特性</a><code>href="http://unKnown/CSS3.htm"</code></li>
        <li><a href="img/photo.jpg">图片素材</a><code>href="img/photo.jpg"</code></li>
    </ul>
</body>
</html>
